import React, { PureComponent } from 'react';
import { Form, Row, Col, Cascader, DatePicker, Input, InputNumber } from 'antd';
import moment from 'moment';

const { TextArea } = Input;

export default class Index extends PureComponent {
    constructor(props) {
        super(props);
        this.state = {
            areas: []
        }
    }

    componentDidMount() {
        const { dispatch, modularName, data = {} } = this.props;
        const { areaList = [] } = data;

        dispatch({
            type: `${modularName}/queryAreaTree`,
            payload: {
                areaPid: '1',
                isLeaf: false,
                callback: (data) => {
                    if (areaList && areaList.length > 0) {
                        let target = data.filter(item => item.id === areaList[0].id)[0];
                        
                        if (target) {
                            this.loadData([target], (list) => {
                                target = list.filter(item => item.id === areaList[1].id)[0];

                                if (target) {
                                    this.loadData([target]);
                                }
                            });
                        }
                    }
                    this.setState({ areas: [...data] })
                }
            }
        });
    }

    loadData = (selectedOptions, callback) => {
        const { dispatch, modularName } = this.props;
        const targetOption = selectedOptions[selectedOptions.length - 1];
        targetOption.loading = true;

        dispatch({
            type: `${modularName}/queryAreaTree`,
            payload: {
                areaPid: `${targetOption.id}`,
                isLeaf: targetOption.areaType === '3',
                callback: (data) => {
                    targetOption.loading = false;
                    targetOption.children = data;
                    if (typeof callback === 'function') {
                        callback(data);
                    }
                }
            }
        })
    }

    render() {
        const { areas = [] } = this.state;
        const { form, data = {}, disabled = false } = this.props;
        const { getFieldDecorator } = form;

        return (
            <Form layout='vertical'>
                <Form.Item label='事件标题'>
                    {getFieldDecorator('eventTitle', {
                        initialValue: data.eventTitle || undefined,
                        rules: [{ required: true, message: '该项为必填项' }]
                    })(
                        <Input placeholder='请输入事件标题' size='large' disabled={disabled} />
                    )}
                </Form.Item>
                <Form.Item label='事件简述'>
                    {getFieldDecorator('eventBrief', {
                        initialValue: data.eventBrief || undefined,
                        rules: [{ required: true, message: '该项为必填项' }]
                    })(
                        <TextArea rows={4} placeholder='请输入事件简述' disabled={disabled} />
                    )}
                </Form.Item>
                <Row gutter={16} type='flex'>
                    <Col span={12}>
                        <Form.Item label='事件类型'>
                            {getFieldDecorator('eventType', {
                                initialValue: data.eventType ? data.eventType.split('/') : undefined,
                                rules: [{ required: true, message: '该项为必填项' }]
                            })(
                                <Cascader
                                    options={[{
                                        label: '社会安全',
                                        value: '社会安全',
                                        children: [
                                            { label: '刑事案件', value: '刑事案件' },
                                            { label: '群体性事件', value: '群体性事件' },
                                            { label: '油气供应中断突发事件', value: '油气供应中断突发事件' },
                                            { label: '地方政府性债务风险', value: '地方政府性债务风险' },
                                            { label: '突发事件人员疏散撤离和避难场所', value: '突发事件人员疏散撤离和避难场所' }
                                        ]
                                    }, {
                                        label: '公共卫生',
                                        value: '公共卫生',
                                        children: [
                                            { label: '传染病疫情', value: '传染病疫情' },
                                            { label: '群体性不明原因疾病', value: '群体性不明原因疾病' },
                                            { label: '急性中毒事件', value: '急性中毒事件' },
                                            { label: '食品安全事故', value: '食品安全事故' },
                                            { label: '突发药品安全事件', value: '突发药品安全事件' },
                                            { label: '突发重大动物疫情', value: '突发重大动物疫情' },
                                            { label: '流感大流行', value: '流感大流行' },
                                            { label: '重大植物疫情', value: '重大植物疫情' }
                                        ]
                                    }, {
                                        label: '事故灾难',
                                        value: '事故灾难',
                                        children: [
                                            { label: '地下空间突发事件', value: '地下空间突发事件' },
                                            { label: '海上船舶污染事故', value: '海上船舶污染事故' },
                                            { label: '大面积停电事件', value: '大面积停电事件' },
                                            { label: '石油天然气管道突发事件', value: '石油天然气管道突发事件' },
                                            { label: '突发环境事件', value: '突发环境事件' },
                                            { label: '道路交通事故', value: '道路交通事故' },
                                            { label: '金融突发事件', value: '金融突发事件' },
                                            { label: '火灾事故', value: '火灾事故' },
                                            { label: '核与辐射事故', value: '核与辐射事故' },
                                            { label: '旅游突发事件', value: '旅游突发事件' },
                                            { label: '内河交通事故', value: '内河交通事故' },
                                            { label: '水务行业突发事件', value: '水务行业突发事件' },
                                            { label: '铁路事故', value: '铁路事故' },
                                            { label: '民用航空器事故', value: '民用航空器事故' },
                                            { label: '供电事故', value: '供电事故' },
                                            { label: '建设工程事故', value: '建设工程事故' },
                                            { label: '燃气事故', value: '燃气事故' },
                                            { label: '桥梁隧道运行事故', value: '桥梁隧道运行事故' },
                                            { label: '危险化学品事故', value: '危险化学品事故' },
                                            { label: '轨道交通运营事故', value: '轨道交通运营事故' },
                                            { label: '特种设备事故', value: '特种设备事故' },
                                            { label: '网络与信息安全事件', value: '网络与信息安全事件' },
                                            { label: '生产安全事故灾难', value: '生产安全事故灾难' },
                                            { label: '海上搜救', value: '海上搜救' },
                                            { label: '工贸行业事故情', value: '工贸行业事故情' }
                                        ]
                                    }, {
                                        label: '自然灾害',
                                        value: '自然灾害',
                                        children: [
                                            { label: '空气重污染', value: '空气重污染' },
                                            { label: '海洋灾害', value: '海洋灾害' },
                                            { label: '气象灾害', value: '气象灾害' },
                                            { label: '地质灾害', value: '地质灾害' },
                                            { label: '地震', value: '地震' },
                                            { label: '防汛防台', value: '防汛防台' },
                                            { label: '水旱灾害', value: '水旱灾害' },
                                            { label: '雨雪冰冻', value: '雨雪冰冻' }
                                        ]
                                    }]}
                                    placeholder='请选择事件类型'
                                    size='large'
                                    disabled={disabled}
                                />
                            )}
                        </Form.Item>
                    </Col>
                    <Col span={12}>
                        <Form.Item label='来源'>
                            {getFieldDecorator('eventSource', {
                                initialValue: data.eventSource || undefined
                            })(
                                <Input placeholder='请输入来源' size='large' disabled={disabled} />
                            )}
                        </Form.Item>
                    </Col>
                    <Col span={12}>
                        <Form.Item label='发生区域'>
                            {getFieldDecorator('areaId', {
                                initialValue: Array.isArray(data.areaList) ? data.areaList.map(item => item.id) : undefined
                            })(
                                <Cascader
                                    changeOnSelect
                                    fieldNames={{ label: 'areaName', value: 'id', children: 'children' }}
                                    options={areas}
                                    placeholder='请选择发生区域'
                                    loadData={this.loadData}
                                    size='large'
                                    disabled={disabled}
                                />
                            )}
                        </Form.Item>
                    </Col>
                    <Col span={12}>
                        <Form.Item label='事发地址'>
                            {getFieldDecorator('eventAddress', {
                                initialValue: data.eventAddress || undefined,
                                rules: [{ required: true, message: '该项为必填项' }]
                            })(
                                <Input placeholder='请输入事发地址' size='large' disabled={disabled} />
                            )}
                        </Form.Item>
                    </Col>
                    <Col span={12}>
                        <Form.Item label='事发时间'>
                            {getFieldDecorator('eventTheTime', {
                                initialValue: data.eventTheTime ? moment(data.eventTheTime, 'YYYY-MM-DD HH:mm:ss') : undefined,
                                rules: [{ required: true, message: '该项为必填项' }]
                            })(
                                <DatePicker showTime placeholder='请选择事发时间' size='large' disabled={disabled} style={{ width: '100%' }} />
                            )}
                        </Form.Item>
                    </Col>
                    <Col span={12}>
                        <Form.Item label='接报时间'>
                            {getFieldDecorator('eventCriminal', {
                                initialValue: data.eventCriminal ? moment(data.eventCriminal, 'YYYY-MM-DD HH:mm:ss') : undefined,
                                rules: [{ required: true, message: '该项为必填项' }]
                            })(
                                <DatePicker showTime placeholder='请选择接报时间' size='large' disabled={disabled} style={{ width: '100%' }} />
                            )}
                        </Form.Item>
                    </Col>
                    <Col span={12}>
                        <Form.Item label='受伤'>
                            {getFieldDecorator('eventInjured', {
                                initialValue: data.eventInjured ? parseInt(data.eventInjured) : 0
                            })(
                                <InputNumber min={0} step={1} precision={0} size='large' disabled={disabled} style={{ width: '100%' }} />
                            )}
                        </Form.Item>
                    </Col>
                    <Col span={12}>
                        <Form.Item label='死亡'>
                            {getFieldDecorator('eventDeath', {
                                initialValue: data.eventDeath ? parseInt(data.eventDeath) : 0
                            })(
                                <InputNumber min={0} step={1} precision={0} size='large' disabled={disabled} style={{ width: '100%' }} />
                            )}
                        </Form.Item>
                    </Col>
                </Row>
            </Form>
        );
    }
}
